<template>
  <div id="big">
    <el-button type="primary" size="mini" @click="showDrawer" id="add"
      >添加数据</el-button
    >
    <el-input
      style="width: 20%"
      placeholder="输入路线查询"
      v-model="text"
      @input="searchh"
      id="select"
    ></el-input>
    <el-button type="primary" size="mini" @click="select" id="renew2"
      >查询</el-button
    >
    <el-button type="primary" size="mini" @click="renew">重置</el-button>
    <el-table
      :data="
        chapterList.slice(
          (paginations.currentPage - 1) * paginations.PageSize,
          paginations.currentPage * paginations.PageSize
        )
      "
      style="width: 67%; margin: 0 auto"
      id="main"
    >
      <el-table-column label="类型">
        <template slot-scope="scope">
          
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="重量">
        <template slot-scope="scope">
          <span>
            {{ scope.row.weight }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <template slot-scope="scope">
          <span>
            {{ scope.row.site }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="电话">
        <template slot-scope="scope">
          <span>
            {{ scope.row.tel }}
          </span>
        </template>
      </el-table-column>
      
    </el-table>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <div style="width: 50%; margin: 0 auto; margin-top: 50px">
        <el-input v-model="userName" placeholder="线路名称"></el-input>
      </div>
      <div style="width: 50%; margin: 0 auto; margin-top: 50px">
        <el-input v-model="road" placeholder="途径"></el-input>
      </div>
      <div style="width: 50%; margin: 0 auto; margin-top: 50px">
        <el-input v-model="site" placeholder="地址"></el-input>
      </div>
      <div style="width: 50%; margin: 0 auto; margin-top: 50px">
        <el-input v-model="tel" placeholder="电话"></el-input>
      </div>
      <div style="width: 50%; margin: 0 auto; margin-top: 50px">
        <el-date-picker
          v-model="timer"
          style="width: 95%"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </div>
      <div style="margin-top: 30px">
        <el-button
          type="primary"
          size="mini"
          @click="subform"
          v-show="!this.chapterId"
          >提交</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="subEditForm"
          v-show="this.chapterId"
          >保存</el-button
        >
      </div>
    </el-drawer>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginations.currentPage"
        :page-sizes="paginations.pageSizes"
        :page-size="paginations.PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="chapterList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      text: "",
      // searchResult: [],
      chapterList: [],
      drawer: false,
      chapterTitle: "",
      chapterId: "",
      userName: "",
      road: "",
      site: "",
      tel: "",
      timer: "",
      //分页
      paginations: {
        // 默认显示第几页
        currentPage: 1,
        // 个数选择器（可修改）
        pageSizes: [1, 2, 3, 4],
        // 默认每页显示的条数（可修改）
        PageSize: 4,
      },
    };
  },
  // created() {
  //   this.searchResult = this.chapterList //存储
  // },
  methods: {
    //  编辑的提交
    subEditForm() {
      if (localStorage.getItem("token")) {
        axios.post("http://localhost:3000/xiugai", {}).then((res) => {
          if (res.data.code == 200) {
            //success warn danger
            this.drawer = false;
            this.getList();
          }
        });
      } else {
        alert("未登录");
      }
    },
    // 添加数据的提交
    subform() {
      if (localStorage.getItem("token")) {
        axios
          .post("http://localhost:3000/sublog", {
            userName: this.userName,
            timer: this.timer,
            road: this.road,
            site: this.site,
            tel: this.tel,
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.drawer = false;
              this.getList();
            }
          });
      } else {
        alert("未登录");
      }
    },
    // 添加数据的默认内容
    showDrawer() {
      this.drawer = true;
      this.userName = "";
      this.site = "";
      this.tel = "";
      this.road = "";
      this.chapterId = "";
      this.timer = "";
    },
    // 编辑
    handleEdit(index, row) {
      this.drawer = true;
      this.chapterId = row.chapterId;
      this.timer = row.timer;
      this.userName = row.userName;
      this.road = row.road;
      this.site = row.site;
      this.tel = row.tel;
      console.log(row);
    },
    // 删除
    handleDelete(index, row) {
      let chapterId = row.chapterId;
      if (localStorage.getItem("token")) {
        axios
          .post("http://localhost:3000/dellog", { chapterId: chapterId })
          .then((res) => {
            if (res.data.code == 200) {
              this.chapterList.splice(index, 1);
            }
          });
      } else {
        alert("未登录");
      }
    },
    // 置顶
    moveToTop(index, row) {
      let chapterId = row.chapterId;
      axios
        .post("http://localhost:3000/movetotop", { chapterId: chapterId })
        .then((res) => {
          let result = res.data;
          this.chapterList = result;
          this.searchResult = this.chapterList;
        });
    },
    // 查询
    select() {
      axios
        .post("http://localhost:3000/selectlog", { text: this.text })
        .then((res) => {
          console.log(res.data);
          let result = res.data;
          this.chapterList = result;
        });
    },
    // 重置
    renew() {
      axios.get("http://localhost:3000/l1").then((res) => {});
    },
    getList() {
      axios.get("http://localhost:3000/l1").then((res) => {
        let result = res.data;
        this.chapterList = result;
        // this.searchResult = this.chapterList
      });
    },

    // //分页/
    // 每页显示多少条
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.paginations.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.paginations.currentPage = 1;
      console.log(`每页 ${val} 条`);
    },
    // 现在显示当前页的第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.paginations.currentPage = val;
      console.log(`当前页: ${val}`);
    },
    // handleOpen(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    // handleClose(key, keyPath) {
    //   console.log(key, keyPath);
    // }

    // searchh: function () {
    //   if (localStorage.getItem('token')) {
    //     this.searchResult = this.chapterList.filter(item => item.userName.includes(this.text))
    //   } else {
    //     alert('未登录')
    //   }
    // }
  },
  mounted() {
    console.log(this.$route);
    this.getList();
  },
};
</script>
<style>
#big {
  margin: 0 auto;
  height: 800px;
}

#add {
  margin-left: 260px;
}

#select {
  margin-left: 600px;
}

.block {
  margin-left: 400px;
}
#renew2 {
  margin-left: 150px;
}
</style>
